<!-- 广场 -->
<template>
  <div class="square-container">
    <van-nav-bar title="广场"
                 :left-arrow="false">
      <template #right>
        <van-icon name="search"
                  size="20"
                  color="inherit" />
      </template>
    </van-nav-bar>
    <!-- 广场内容 -->
    <div class="square-content-container">

      欢迎来到偶云客广场舞
      <!-- <div>
        本地视频：
        <video id="local_video"
               style="width:200px;height:200px;border:1px solid red"
               autoplay
               muted></video>
      </div>
      <div>
        远端视频：
        <video id="received_video"
               style="width:200px;height:200px;border:1px solid red"
               autoplay></video>

      </div>

      <button @click="call">
        发起通话
      </button>
      <button style="margin-left:10px"
              @click="receive"
              :disabled="disabled">
        接听通话
      </button>-->
    </div>

  </div>
</template>

<script>

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {

  data () {
    //这里存放数据
    return {
      active: 2,
      disabled: true,
    };
  },
  //方法集合
  methods: {

    call () {

      // const socket = this.$store.state.socket;
      // var webrtcConfig = {
      //   // 媒体约束
      //   constraints: {
      //     audio: true,
      //     video: true
      //   },
      //   from: '18856895420',
      //   to: '15021182839'
      // }
      // //发起方发起webrtc通话请求
      // Webrtc.init(socket).call(webrtcConfig, (webrtc) => {
      //   // 将webrtc 存起来
      //   this.$store.commit('setWebrtc', webrtc)
      //   var localVideoDom = document.querySelector("#local_video");
      //   var webrtcData = webrtc.getWebrtcData();
      //   localVideoDom.srcObject = webrtcData.localMediaStream;

      // }, (localMediaStream, remoteMediaStream) => {
      //   console.log("回调流信息", remoteMediaStream)
      //   var remoteVideoDom = document.querySelector("#received_video");
      //   remoteVideoDom.srcObject = remoteMediaStream[0];
      // })
    },

    receive () {

      // const socket = this.$store.state.socket;
      // var webrtcConfig = {
      //   constraints: {
      //     audio: true,
      //     video: true
      //   },
      //   from: '15021182839',
      //   to: '18856895420'
      // }


      // // 接收方准备接收发起方的请求
      // Webrtc.init(socket).receive(webrtcConfig, (webrtc) => {
      //   // 将webrtc 存起来
      //   this.$store.commit('setWebrtc', webrtc);
      //   // 发送给发起方信令告知这边已经准备可以进行下一步
      //   let agreeCallMessage = new proto.com.ouyu.im.Message();
      //   agreeCallMessage.setFrom(webrtcConfig.from)
      //   agreeCallMessage.setTo(webrtcConfig.to)
      //   agreeCallMessage.setContentType(SOCKET_CONSTANT.PACKET.MESSAGE_CONTENT_TYPE.TEXT_CONTENT);
      //   agreeCallMessage.setContent(JSON.stringify({
      //     type: "agree-call",
      //   }));
      //   agreeCallMessage.setCreateTime(new Date().getTime());
      //   socket.send(agreeCallMessage, SOCKET_CONSTANT.PACKET.MESSAGE_TYPE.WEBRTC_SIGNALING);
      // }, (localMediaStream, remoteMediaStream) => {
      //   console.log("回调流信息", remoteMediaStream)
      //   var localVideoDom = document.querySelector("#local_video");
      //   var remoteVideoDom = document.querySelector("#received_video");
      //   localVideoDom.srcObject = localMediaStream;
      //   remoteVideoDom.srcObject = remoteMediaStream[0];
      // });

      // Webrtc.init(socket, (webrtc) => {

      // }).answering(config, (webrtcData) => {
      //   var localVideoDom = document.querySelector("#local_video");
      //   var remoteVideoDom = document.querySelector("#received_video");
      //   localVideoDom.srcObject = webrtcData.localMediaStream;
      //   remoteVideoDom.srcObject = webrtcData.remoteMediaStream;
      // })

    },

    onmessage: function (data) {
      // if (data.messageType === SOCKET_CONSTANT.PACKET.MESSAGE_TYPE.WEBRTC_SIGNALING) {
      //   var contentType = data.message.getContentType();
      //   var content = {};
      //   if (contentType === SOCKET_CONSTANT.PACKET.MESSAGE_CONTENT_TYPE.TEXT_CONTENT) {
      //     content = JSON.parse(data.message.getContent())
      //   }
      //   let webrtc = this.$store.state.webrtc;

      //   if (webrtc) {
      //     if (content.type === 'answer') {
      //       webrtc.addRemoteAnswer(content.sdp)
      //     } else if (content.type === 'ice-candidate') {
      //       console.log("发送方/接收方==>接收到远端发送的ice候选者信息,并添加进入连接")
      //       webrtc.addIceCandidate(content.sdp)
      //     } else if (content.type == 'agree-call') {
      //       webrtc.start();
      //     } else if (content.type === 'offer') {
      //       webrtc.addRemoteOffer(content.sdp);
      //     }
      //   } else {
      //     // 接收方接收到call
      //     if (content.type === 'call') {
      //       // 应该直接跳转页面然后打开待接收弹框
      //       this.disabled = false;
      //       return;
      //     }

      //   }
      // }


    },
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.$emitter.on('onmessage', this.onmessage);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  //生命周期 - 创建之前
  beforeCreate () { },
  //生命周期 - 挂载之前
  beforeMount () { },
  //生命周期 - 更新之前
  beforeUpdate () { },
  //生命周期 - 更新之后
  updated () { },
  //生命周期 - 销毁之前
  beforeUnmount () { },
  //生命周期 - 销毁完成
  unmounted () {
    //销毁监听
    this.$emitter.off('onmessage', this.onmessage);
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated () { },
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.square-content-container {
}
</style>
